<template>
  <md-nav-bar title="商城订单" />
  <view class="container">
    <mescroll-empty v-if="data.list.length == 0"></mescroll-empty>
    <!-- <view class="search flex-c">
      <uni-search-bar
        class="uni-mt-10 search-bar"
        radius="40"
        placeholder="请输入活动名称"
        clearButton="auto"
        cancelButton="none"
        v-model="data.value" />
      <md-icon type="bg" name="search" class="search-icon" width="88" height="65" @click="handleSearch" />
    </view>
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :safearea="true">
      <uni-list>
        <uni-list-item
          ellipsis="1"
          title="超长文字显示一行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" />
        <uni-list-item
          ellipsis="2"
          title="超长文字显示二行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
          rightText="二行显示" />
        <uni-list-item
          ellipsis="1"
          title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
          note="列表描述信息,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字"
          rightText="一行显示" />
        <uni-list-item
          ellipsis="1"
          title="列表左侧带略缩图"
          note="列表描述信息"
          thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
          thumb-size="lg"
          rightText="大图" />
      </uni-list>
    </mescroll-body> -->
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
// 组件
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
// 接口
import { myOrder } from '@/api';

const data = reactive<any>({
  list: [],
  value: '',
});

function handleSearch() {
  // 回到顶部
  getMescroll().scrollTo(0, 0);
  // page重置1请求列表
  getMescroll().resetUpScroll();
}

/**
 * 接口相关
 */
// 订单列表
const upCallback = async (mescroll: any) => {
  try {
    let res = await myOrder({ page: mescroll.num, limit: mescroll.size, title: data?.value });
    const curPageData = res?.data?.data || []; // 当前页数据
    if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
    data.list = data.list.concat(curPageData); //追加新数据
    mescroll.endByPage(curPageData.length, res?.data?.total);
  } catch (e) {
    //TODO handle the exception
    mescroll.endErr(); // 请求失败, 结束加载
  }
};
</script>

<style lang="scss" scoped>
.container {
}
</style>
